<template>
  <div class="image-preview-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-button @click="openPreview1">预览单张图片</d-button>
      <d-button @click="openPreview2">预览多张图片</d-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'imagePreviewDemo',
  data () {
    return {}
  },
  methods: {
    openPreview1 () {
      this.$ImagePreview(`https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg`)
    },
    openPreview2 () {
      this.$ImagePreview([
        `https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg`,
        `https://5b0988e595225.cdn.sohucs.com/images/20170905/f6a2c1dafab944d2a75b9798c8ea0f7d.png`,
        `https://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg`
      ], 0)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .image-preview-demo
</style>
